﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="GalleryAndroid.aspx.cs" Inherits="GalleryAndroid" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/GalleryDetail.css" rel="stylesheet" type="text/css" />
<style type="text/css">/*GalleryAndroid*/
    .span2 
    {
        width: 252px;
    }
    .span6 
    {
        width: 570px;
    }
   #iphone-sm-bg {
        background: url(images/iphone-sm-bg.png) no-repeat center top;
        clear: both;
        overflow: hidden;
        padding-top: 53px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }
    .iphone-sm-width {
        width: 191px;
        margin: 0 auto;
    }
</style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#cssmenu ul li').removeClass('active');
            $('#cssmenu ul li.4').addClass('active');
        });
    </script>

    <script src="javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="javascript/jquery.cycle.all.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#slide").cycle({
                fx: 'fade', //Hiệu ứng - Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html
                speed: 1000, //Tốc độ diễn ra hiệu ứng
                timeout: 3000, //3 giây: Thời gian thay đổi giữa các hình 1/1000 giây
                pager: '#slide-nav' //Tạo phân trang cho <div id="slide-nav"></div>
            });
        });
    </script>
    <style type="text/css">
        * { margin: 0; padding: 0 }
        body { font: 14px arial }
        #wrapper { width: 100%; margin: 0 auto; margin-top: 50px }
        #slide, #slide-nav { padding: 0px; width: 100%; height: 316px}/*width:191px--%>*/
        #slide img { top: 0px !important; left: 0px !important }
        #slide-nav {height: 20px}
        #slide-nav a{ background: #eee; margin-right: 4px; padding: 1px 5px; text-decoration: none; border: 2px solid green; color: green}
        #slide-nav a.activeSlide{background: green; color: #fff}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentImage" Runat="Server">
<img src="images/artical-banner.png" alt="">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentMain" Runat="Server">
<h1 class="top-heading">Gallery</h1>
    <div class="span12" style="margin-left:0px; padding-top:0px;">
      <div class="gallery-in-top-title">
        <div class="float-left"><asp:Label ID="lbName" runat="server"></asp:Label></div>
        <a href="Gallery.aspx" class="btn btn-primary back-to-gallry">Back to Gallry</a>
      </div>
      <div class="gallery-mid-bg">
        <div class="span12" style="margin-left:0px;">
          <div class="span2" id="ipad-gallery-width">
            <div id="iphone-sm-bg" class="iphone-sm-width">
                <div class="bx-wrapper" style="max-width: 100%;">
                    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 316px;">
                         <div id="slide">
                            <%--<img src="images/Gallery_Image/financial-calculator01.png" alt="Picture 1" />
                            <img src="images/Gallery_Image/financial-calculator02.png" alt="Picture 2" />
                            <img src="images/Gallery_Image/financial-calculator03.png" alt="Picture 3" />--%>
                            <asp:Repeater ID="rptGallery_Image" runat="server" >
                                <ItemTemplate>
                                    <img src='<%#"images/Gallery_Image/"+Eval("Image") %>' width="100%" />
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                    <%--<div class="bx-controls bx-has-controls-direction">
                        <div class="bx-controls-direction">
                            <a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a>
                        </div>
                    </div>--%>
                </div>
            </div>
            <div class="bx-pager">
              <%--<div class="clear">Click to enlarge screenshot:</div>--%>
              <div id="slide-nav"></div>
              <%--<a href="" data-slide-index="0" class=""><img src="images/Gallery_Image/financial-calculator01-t.png" alt=""></a> 
              <a href="" data-slide-index="1" class=""><img src="images/Gallery_Image/financial-calculator02-t.png" alt=""></a> 
              <a href="" data-slide-index="2" class=""><img src="images/Gallery_Image/financial-calculator03-t.png" alt=""></a> --%>         
            </div>
          </div>
          <div class="span6" id="ipad-gallery-width2">
            <p>
                <asp:Label ID="lbDescription" runat="server"></asp:Label>
            </p>
          </div>
        </div>
      </div>
      <%--<div class="main">
        <div class="elastislide-wrapper elastislide-horizontal"><div class="elastislide-carousel"><ul id="carousel" class="elastislide-list" style="display: block; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out;"><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-arrange-sequence.html"><span>Arrange Sequence</span><img src="images/bottom-gallery/arrange-sequence-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-test-your-skill.html"><span>Test Your Skills</span><img src="images/bottom-gallery/test-your-skills-icon.png" alt="image01"></a></li><li class="select" style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-financial-calculator.html"><span>Financial Calculator</span><img src="images/bottom-gallery/financial-calculator-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-nyc-li.html"><span>NYC &amp; LI Red Light Camera</span><img src="images/bottom-gallery/nyc-li-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-nypd.html"><span>NYPD Precincts</span><img src="images/bottom-gallery/nypd-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-whats-on-tonight.html"><span>What's on Tonight</span><img src="images/bottom-gallery/whats-on-tonight-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-flash-light.html"><span>Flash Light</span><img src="images/bottom-gallery/flash-light-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-mobile-rest.html"><span>Mobile Restaurant</span><img src="images/bottom-gallery/mobile-rest-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-expedigital.html"><span>Expedigital</span><img src="images/bottom-gallery/expedigital-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-fdny.html"><span>FDNY Firehouses</span><img src="images/bottom-gallery/fdyn-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-building-growth-factory.html"><span>Building Growth Factory</span><img src="images/bottom-gallery/building-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-CBTKids.html"><span>CBT4Kids</span><img src="images/bottom-gallery/cbtkids-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-eckey.html"><span>ECKey</span><img src="images/bottom-gallery/eckey-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-shel-comm.html"><span>Shel Communications</span><img src="images/bottom-gallery/shel-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-geotol-pro.html"><span>GeoTol Pro Digital Guidee</span><img src="images/bottom-gallery/geo-icon.png" alt="image02"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-signaltrack.html"><span>SignalTrack Mobile</span><img src="images/bottom-gallery/signal-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-large-e-comm-com.html"><span>Large E-Commerce Company</span><img src="images/bottom-gallery/e-com-icon.png" alt="image02"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-strokemaster.html"><span>StrokeMaster</span><img src="images/bottom-gallery/stoke-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-moo-baa-quack.html"><span>Moo Baa Quack</span><img src="images/bottom-gallery/moo-icon.png" alt="image02"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-zada-partners.html"><span>Zada Partners</span><img src="images/bottom-gallery/zada-p-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-large-bpo-com.html"><span>Large BPO Company</span><img src="images/bottom-gallery/bpo-icon.png" alt="image02"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-my-easy-media.html"><span>My Easy Media</span><img src="images/bottom-gallery/easy-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-task-management.html"><span>Task Management</span><img src="images/bottom-gallery/task-icon.png" alt="image02"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-strikeforce.html"><span>StrikeForce</span><img src="images/bottom-gallery/strike-force-icon.png" alt="image01"></a></li><li style="width: 33.29545454545455%; max-width: 181px; max-height: 145px;"><a href="ga-good-vibrations.html"><span>Good Vibrations</span><img src="images/bottom-gallery/good-icon.png" alt="image02"></a></li></ul></div><nav><span class="elastislide-prev" style="display: none;">Previous</span><span class="elastislide-next">Next</span></nav></div>
      </div>--%>
      <br />
    </div>
</asp:Content>

